/**
 *
 * cityPicker v0.1
 *
 * Author: CrazyCode
 * Date:2014/01/19
 *
 * License:
 * The MIT License (MIT)
 * Copyright (c) 2014 CrazyCode
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * 插件名称:
 * 城市选择器
 * 依赖:jquery-1.9.1
 *
 * 可选参数说明:
 * url:获取json数据的url地址
 * title:标题文字
 * width:弹出层宽度
 * ismodal:是否是模式窗口
 * buttons:是否显示关闭按钮
 * buttontext:关闭按钮显示文字
 * valbind:将选中的城市绑定到对象
 *
 */
;
(function ($) {
    $.fn.cityPicker = function (options) {
        var defaults = {
            url: "",
            title: "请选择地区",
            width: 520,
            ismodal: true,
            iscenter: true,
            buttons: true,
            buttontext: "关闭",
            valbind: ".username"
        };
        var options = $.extend({}, defaults, options);
        var $obj = $(this);
        var pickerTop = $obj.offset().top + $obj.height();
        var pickerWidth = options.width;
        var pickerLeft = 0;
        if (options.iscenter)
            pickerLeft = $(window).width() / 2 - pickerWidth / 2;
        else
            pickerLeft = $obj.offset().left;

        var $body = $("body");
        var $cityPickerOverlay = $("<div class = 'citypicker-overlay'></div>")
        var $cityPicker = $("<div class = 'citypicker'></div>");
        var $cityPickerTitleHandler = $("<div class = 'citypicker-head-handler'></div>");
        var $cityPickerContainer = $("<div class = 'citypicker-conainer'></div>");
        var $cityPickerBottomHandler = $("<div class = 'citypicker-bottom-handler'></div>");

        var $cityPickerCloseBtn = $("<button class = 'citypicker-close-btn'>"
            + options.buttontext + "</button>");

        _init_picker();

        $cityPickerContainer.on("click", ".pick-item", function () {
            chooseItem(this);
        });

        $cityPickerCloseBtn.on("click", function () {
            closeCityPicker();
        });

        $cityPickerOverlay.on("click", function () {
            if (!options.ismodal) {
                closeCityPicker();
            }
        });

        function _init_picker() {

            if ($(".citypicker").length > 0) {
                return false;
            }

            if (options.url == "" || options.url.length == 0) {
                alert("set url first please ! ");
                return false;
            }
            $cityPickerTitleHandler.text(options.title);
            $cityPicker.append($cityPickerTitleHandler).append($cityPickerContainer)
                .append($cityPickerBottomHandler);

            if (options.buttons) {
                $cityPickerBottomHandler.append($cityPickerCloseBtn);
            }

            $body.append($cityPickerOverlay.css({opacity: 0, display: "block"}).animate({
                    opacity: '0.5'
                })).append($cityPicker.css({
                    top: pickerTop,
                    left: pickerLeft,
                    width: pickerWidth
                }).animate({
                        opacity: '0.9'
                    }));

            $.getJSON("js/jsondata/provinces.json", function (data) {
                $.each(data, function (i, item) {
                    $cityPickerContainer
                        .append("<span class = 'pick-item' areacode = '"
                            + item.areacode + "' >" + item.name
                            + "</span>");
                });
            });
        }

        function closeCityPicker() {
            $cityPicker.animate({
                opacity: '0'
            }, function () {
                $cityPicker.remove();
            });
            $cityPickerOverlay.animate({opacity: 0}, function () {
                $(this).remove();
            });
        }

        function chooseItem(current) {
            var code = $(current).attr("areacode");
            $(options.valbind).val(code);
            $obj.val($(current).text());
            $.getJSON(options.url, {code: code}, function (data) {
                $cityPickerContainer.empty();
                $.each(data.areaList, function (i, item) {
                    $cityPickerContainer.append("<span class = 'pick-item' areacode = '"
                        + item.code
                        + "'>"
                        + item.area
                        + "</span>");
                });
            });
        }
    };
})(jQuery);